<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--样式-->
    <style type="text/css">
        #main {
            float: left;
            width: 80%;
            margin-left: -20px;
            overflow: hidden;
        }

        .mod-main {
            padding: 10px;
            background-color: #fff;
            margin-bottom: 20px;
        }

        .mod-main .mt {
            display: inline-block;
            display: block;
            padding: 10px;
        }


        .mod-main .mt .extra-l {
            float: left;
        }

        ol, ul {
            list-style: none;
        }

        .mod-main .mt .extra-l li {
            float: left;
            padding-left: 20px;
        }

        .mod-main .mt .extra-l li a.curr {
            padding-bottom: 0;
            color: #e4393c;
            border-bottom: 2px solid #e4393c;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .mod-main .mt .extra-l li a {
            display: inline-block;
            padding-bottom: 2px;
            color: #999;
        }

        em, i, u {
            font-style: normal;
        }


        .clear, .clr {
            display: block;
            overflow: hidden;
            clear: both;
            height: 0;
            line-height: 0;
            font-size: 0;
        }


        .mr10 {
            margin-right: 10px;
        }

        .ml5 {
            margin-left: 5px;
        }

        .mr5 {
            margin-right: 5px;
        }

        .ftx-03, .ftx03 {
            color: #999;
        }

        .btn-5:link, .btn-5:visited, .btn-6:link, .btn-6:visited, .btn-7:link, .btn-7:visited, .btn-8:link, .btn-8:visited {
            color: #323333;
            text-decoration: none;
        }

        body {
            font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #666;
            background: #fff;
        }

        #container, #container .w {
            background-color: #f5f5f5;
        }

        #content {
            padding-left: 120px;
            padding-top: 20px;
            display: inline-block;
            display: block;
        }

        a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
            margin: 0;
            padding: 0;
        }


        .btn-5:link, .btn-5:visited, .btn-6:link, .btn-6:visited, .btn-7:link, .btn-7:visited, .btn-8:link, .btn-8:visited {
            color: #323333;
            text-decoration: none;
        }

        .btn-5, .btn-6, .btn-7, .btn-8 {
            background-color: #f5fbef;
            background-image: -moz-linear-gradient(top, #f5fbef, #eaf6e2);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5fbef), color-stop(1, #eaf6e2));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5fbef', endColorstr='#eaf6e2', GradientType='0');
            -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5fbef', endColorstr='#eaf6e2');
            background-image: linear-gradient(to bottom, #f5fbef 0, #eaf6e2 100%);
            border-radius: 2px;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            height: 18px;
            line-height: 18px;
            border: 1px solid #bfd6af;
            padding: 2px 14px 3px;
            color: #323333;
        }

        element.style {
            width: 280px;
        }

        .ac {
            text-align: right;
        }

        .fr {
            float: right;
        }

        .ftx-05, .ftx05 {
            color: #005ea7;
        }


        img {
            border: 0;
            vertical-align: middle;
        }


        .rank.jxz {
            height: 19px;
            line-height: 19px;
        }

        .rank {
            margin-right: 10px;
            display: inline-block;
            height: 17px;
            line-height: 17px;
        }


        #sub {
            float: left;
            width: 120px;
            position: relative;
            left: -50px;
        }

        #menu {
            width: 100px;
            padding-left: 10px;
        }

        #menu dl {
            padding-bottom: 15px;
        }

        #menu dl dt {
            height: 28px;
            line-height: 28px;
            color: #333;
            font-weight: 700;
        }

        #menu dl dd {
            color: #666;
            line-height: 24px;
        }

        #menu dl dd.curr a {
            color: #e4393c;
            font-weight: 700;
        }

        .mb10 {
            margin-bottom: 10px;
        }

        .ftx-03, .ftx03 {
            color: #999;
        }

        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        button, html input[type=button], input[type=submit] {
            -webkit-apperance: button;
            cursor: pointer;
        }

        .fileinput-button input {
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
        }

        element.style {
            border: 1px solid #DB9A9A;
            background-color: #FFE8E8;
            color: #CC0000;
            text-align: left;
            display: none;
        }

        .mod-main .mt:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .update-face-cont .img-b-cont {
            position: relative;
            width: 470px;
            height: 236px;
            margin-bottom: 20px;
            display: table;
            text-align: center;
        }

        .update-face-cont .img-cont {
            background: #f9f9f9;
            border: 1px solid #e9eaec;
        }

        img {
            border: 0;
            vertical-align: middle;
        }

        .update-face-cont .img-b-cont .img-b {
            display: table-cell;
            vertical-align: middle;
            position: relative;
            z-index: 5;
        }

        .update-rcol {
            float: left;
            width: 240px;
            margin-left: 30px;
        }

        .m, .mb, .mc, .mt, .sm, .smb, .smc, .smt {
            overflow: hidden;
            zoom: 1;
        }

        .update-rcol .smc {
            color: #999;
            line-height: 20px;
        }

        .update-face-cont .img-m-cont {
            position: relative;
            width: 100px;
            height: 100px;
            margin-top: 20px;
            display: table;
            text-align: center;
        }

        .update-face-cont .img-m-cont .img-s {
            display: table-cell;
            vertical-align: middle;
        }

        .update-face-cont .img-s-cont {
            position: relative;
            width: 50px;
            height: 50px;
            margin-top: 20px;
            display: table;
            text-align: center;
        }

        .update-face-cont .img-s-cont .img-s {
            display: table-cell;
            vertical-align: middle;
            *position: absolute;
            *top: 50%;
            *left: 50%;
        }

        .update-lcol {
            float: left;
            border-right: 1px solid #e9eaec;
            width: 470px;
            padding: 0 30px;
        }

    </style>
    <link rel="stylesheet" href="/static/index/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="/static/index/css/GL.css">
    <script src="/static/index/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="/static/index/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="/static/index/js/swiper-3.4.2.min.js"></script>

</head>

<body>
<div class="top_find">
    <div class="top_find_son">
        <img src="/static/index/img/top_find_logo.png">
        <div class="input_find">
            <input type="text" placeholder="卸妆水"/>
            <span style="background: url(/static/index/img/img_12.png) 0 -1px;"></span>
            <a href="/static#"><img src="/static/index/img/img_09.png"/></a>
        </div>
    </div>
</div>
<ul class="left_floor">
    <li class="left_floor_xiang">享品质</li>
    <li class="left_floor_fu">服饰美妆</li>
    <li class="left_floor_jia">家电手机</li>
    <li class="left_floor_dian">电脑数码</li>
    <li class="left_floor_3C">3C运动</li>
    <li class="left_floor_ai">爱吃</li>
    <li class="left_floor_mu">母婴家居</li>
    <li class="left_floor_tu">图书汽车</li>
    <li class="left_floor_you">游戏金融</li>
    <li class="left_floor_lv">旅行健康</li>
    <li class="left_floor_hai">还没逛够</li>
    <li class="left_floor_ding">顶部</li>
</ul>
<header>
    <div class="head">
        <a href="http://www.drygoods.top"><img src="/static/index/img/img_01.png"/></a>
        <p>X</p>
    </div>
    <!--头部-->
    <div class="header_head">
        <div class="header_head_box">
            <ul>
                <li>
                    <a href="http://www.drygoods.top" class="header_head_p_a1" style="width:73px;">
                        drygoods首页
                    </a>
                    <a th:if="${session.loginUser!=null}">
                        欢迎：[[${(session.loginUser!=null)?session.loginUser.username:''}]]
                    </a>
                    <a th:if="${session.loginUser==null}" href="http://auth.drygoods.top/login.html">
                        您好，请登录
                    </a>
                </li>
                <li>
                    <a th:if="${session.loginUser==null}" href="http://auth.drygoods.top/reg.html" class="li_2">
                        免费注册
                    </a>
                </li>
                <span>|</span>
                <li>
                    <a href="http://member.drygoods.top/orderList.html">我的订单</a>
                </li>


            </ul>
        </div>
    </div>

    <!--个人信息主体-->
    <div id="container">
        <div class="w">
            <div id="content">
                <div id="sub">
                    <div id="menu">
                        <dl class="fore1">
                            <dt id="_MYJD_setting">设置</dt>
                            <dd class="fore1_1 curr" id="_MYJD_info">
                                <a href="http://member.drygoods.top/members.html"
                                   target="_self">个人信息</a>
                            </dd>
                            <dd class="fore1_3" id="_MYJD_accbinde">
                                <a href="http://member.drygoods.top/membersBinding.html"
                                   target="_self">账号绑定</a>
                            </dd>

                            <dd class="fore1_5" id="_MYJD_comments">
                                <a clstag="homepage|keycount|home2013|homeadd"
                                   href="http://member.drygoods.top/membersAddress.html" target="_self">收货地址</a>
                            </dd>
                        </dl>
                    </div>
                </div>

                <div id="main">
                    <div class="mod-main">
                        <div class="mt">
                            <ul class="extra-l">
                                <li class="fore-1"><a href="http://member.drygoods.top/members.html">基本信息</a></li>
                                <li class="fore-2"><a class="curr" href="http://member.drygoods.top/membersHeader.html">头像照片</a>
                                </li>
                                <li class="fore-3"><a href="http://member.drygoods.top/membersMoreInfo.html">更多个人信息</a>
                                </li>

                            </ul>
                        </div>
                        <div class="mc update-face-cont">
                            <div class="update-lcol">
                                <div class="mb10">
                                    <form enctype="multipart/form-data"
                                          action="http://www.drygoods.top/api/thirdParty/fileUpload">
                                        <div style="float: left;width: 100%;">
                                            <div style="position: relative;width: 100%;overflow: hidden;margin-bottom: 10px;">
                                                <input type="file" value="" name="file" id="input_file"
                                                       accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                                                       onchange="imgPreview(this,0)">
                                            </div>
                                        </div>
                                        <!--                                        <div class="item">-->
                                        <!--                                            <span class="label">&nbsp;</span>-->
                                        <!--                                            <div class="fl">-->
                                        <!--                                                <button type="submit" class="btn-5" onclick="updateUserInfo()">提交-->
                                        <!--                                                </button>-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->

                                    </form>
                                </div>

                                <div class="img-b-cont img-cont ">
                                    <!--<div class="tip">编辑预览区</div>-->
                                    <div class="img-b">
                                        <img id="bigImage" name="bigImage" alt="" width="150" height="150"
                                             th:src="${memberInfo.header}">
                                    </div>
                                </div>
                            </div>
                            <div class="update-rcol">
                                <div class="smt"><h3>效果预览</h3></div>
                                <div class="smc">
                                    你上传的图片会自动生成2种尺寸，请注意小尺寸的头像是否清晰
                                    <div class="img-m-cont img-cont">
                                        <div class="img-s">
                                            <img style="width: 100px;height: 100px" id="midImage" name="midImage"
                                                 th:src="${memberInfo.header}">
                                        </div>
                                    </div>
                                    100*100像素
                                    <div class="img-s-cont img-cont">
                                        <div class="img-s">
                                            <img style="width: 50px;height: 50px" id="smaImage" name="smaImage"
                                                 th:src="${memberInfo.header}">
                                        </div>
                                    </div>
                                    50*50像素
                                </div>
                            </div>
                            <div class="clr"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>

<div class="section_second">
    <!-- 第一层 -->
    <div style="padding-bottom: 18px;background: #eaeaea;overflow: hidden;margin-top: 10px">
        <p class="section_second_header_img"></p>
        <li style="width: 247px;float: left;margin-left: 127px">
            <div style="position: relative;margin: 0 auto;padding-left: 45px; width: 180px;">
                <p style="overflow: hidden;
                width: 100%;
                height: 42px;
                line-height: 42px;font-size: 18px;
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 15px;
                color: #444;">
                    品类齐全，轻松购物</p>
            </div>
        </li>
        <li style="width: 247px;float: left;margin-left: 90px;">
            <div style="position: relative;margin: 0 auto;padding-left: 45px; width: 180px;">
                <p style="overflow: hidden;
                width: 100%;
                height: 42px;
                line-height: 42px;font-size: 18px;
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 15px;
                color: #444;">
                    多仓直发，极速配送</p>
            </div>
        </li>
        <li style="width: 247px;float: left;margin-left: 90px;">
            <div style="position: relative;margin: 0 auto;padding-left: 45px; width: 180px;">
                <p style="overflow: hidden;
                width: 100%;
                height: 42px;
                line-height: 42px;font-size: 18px;
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 15px;
                color: #444;">
                    正品好货，精致服务</p>
            </div>
        </li>
        <li style="width: 247px;float: left;margin-left: 90px;">
            <div style="position: relative;margin: 0 auto;padding-left: 45px; width: 180px;">
                <p style="overflow: hidden;
                width: 100%;
                height: 42px;
                line-height: 42px;font-size: 18px;
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 15px;
                color: #444;">
                    天天低价，畅选无忧</p>
            </div>
        </li>
        <br/><br><br>
        <p style="border-bottom: solid 1px #dedede;margin-bottom: 10px"></p>
        <div class="w" style="width: 1210px;text-align: center;margin-left: 165px;">
            <div class="copyright_links" style="margin: 0;padding: 0;">
                <p>
                    <a href="//about.jd.com"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">关于我们</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//about.jd.com/contact/"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">联系我们</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//help.jd.com/user/custom.html" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">联系客服</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//lai.jd.com" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">合作招商</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//helpcenter.jd.com/venderportal/index.html" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">商家帮助</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//jzt.jd.com" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">营销中心</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//app.jd.com/" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">手机京东</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//club.jd.com/links.aspx" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">友情链接</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//media.jd.com/" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">销售联盟</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">京东社区</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//pro.jd.com/mall/active/3TF25tMdrnURET8Ez1cW9hzfg3Jt/index.html"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">风险监测</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//about.jd.com/privacy/" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">隐私政策</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//gongyi.jd.com" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">京东公益</a><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//www.joybuy.com/" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">English
                        Site</a><span style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//corporate.jd.com/" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">Media
                        &amp; IR</a>
                </p>
            </div>
            <div class="copyright_info">
                <p>
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000088"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">京公网安备
                        11000002000088号</a><span style="margin: 0 6px;color: #ccc;">|</span><span><a
                        href="http://beian.miit.gov.cn"
                        target="_blank"
                        style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">京ICP备11041704号</a></span><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//h5.m.jd.com/pc/dev/3T3No18XR8k8rpLGLGhgbJ1StAFq/index.html" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;"
                       rel="noopener noreferrer">ICP</a><span style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//jdwp.jd.com/544-2927.html"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a><span
                        style="margin: 0 6px;color: #ccc;">|</span><span
                        style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">新出发京零 字第大120007号</span>
                </p>
                <p><span style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">互联网出版许可证编号新出网证(京)字150号</span><span
                        style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//pro.jd.com/mall/active/3bVDLXHdwVmdQksGF8TtS7ocq1NY/index.html"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">出版物经营许可证</a><span
                            style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//img10.360buyimg.com/ling/jfs/t1/164806/19/5070/567736/6017d6d6Eab06ec9c/d8ca6e029f495447.jpg"
                       target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">网络文化经营许可证京网文[2020]6112-1201号</a><span
                            style="margin: 0 6px;color: #ccc;">|</span><span
                            style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">违法和不良信息举报电话：4006561155</span>
                </p>
                <p><span class="copyright_text"
                         style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">Copyright © 2004 - <em
                        id="copyright_year"
                        style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">2022</em>  京东JD.com 版权所有</span><span
                        style="margin: 0 6px;color: #ccc;">|</span><span
                        style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">消费者维权热线：4006067733</span>
                    <a href="//pro.jd.com/mall/active/38PitHBfR7ZopNHRSHnuuWR5AMDL/index.html" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;"
                       class="copyright_license">经营证照</a>
                    <span style="margin: 0 6px;color: #ccc;">|</span>
                    <span style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">(京)网械平台备字(2018)第00003号</span>
                    <span style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//h5.m.jd.com/babelDiy/Zeus/ARcYnJ8coUdUecn6UQAN6TDaVmH/index.html" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;"
                       class="mod_business_license">营业执照</a>
                    <span style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="//h5.m.jd.com/pc/dev/3YxBvN6m5TsRyVCvDSeEh7awmLB4/index.html" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;"
                       rel="noopener noreferrer">增值电信业务经营许可证</a>
                </p>
                <p><span style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">京东旗下网站：</span>
                    <a href="https://www.jdpay.com/" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">京东钱包</a><span
                            style="margin: 0 6px;color: #ccc;">|</span>
                    <a href="https://www.jdcloud.com" target="_blank"
                       style="font-size: 12px;cursor: pointer;text-align: center;color: #666;text-decoration: none;">京东云</a>
                </p>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    function search() {
        var keyword = $("#searchText").val()
        window.location.href = "http://search.drygoods.top/list.html?keyword=" + keyword;
    }

</script>
<script type="text/javascript" src="/static/index/js/text.js"></script>
<script type="text/javascript" src="/static/index/js/header.js"></script>
<script type="text/javascript" src="/static/index/js/secend.js"></script>
<script type="text/javascript" src="/static/index/js/zz.js"></script>
<script type="text/javascript" src="/static/index/js/index.js"></script>
<script type="text/javascript" src="/static/index/js/left,top.js"></script>
<script type="text/javascript" src="/static/index/js/catalogLoader.js"></script>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    let uploadObj; // 上传凭证对象
    function imgPreview(fileDom, i) {
        var header; //上传之后的图片oss地址
        var uuid = getUUID();
        // 获取上传凭证
        $.ajax({
            url: 'http://www.drygoods.top/api/thirdParty/oss/policy', // 这里是请求的后台通过oss上传凭证的接口
            data: JSON.stringify({
                data: ''
            }),
            dataType: 'json',
            type: 'post',
            headers: {
                'Content-Type': 'application/json',
            },
            success: function (response) {
                if (response) {
                    uploadObj = response.data;
                    // 获取到上传凭证成功之后 封装请求的数据
                    let request = new FormData();
                    request.append("OSSAccessKeyId", uploadObj.accessid); //Bucket 拥有者的Access Key Id。
                    request.append("policy", uploadObj.policy); //policy规定了请求的表单域的合法性
                    request.append("Signature", uploadObj.signature); //根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
                    //---以上都是阿里的认证策略
                    let file = document.getElementById("input_file").files[0];
                    if (!file) {
                        return;
                    }
                    // alert(file.name)
                    header = uploadObj.host + "/" + uploadObj.dir + "/" + uuid + file.name;
                    request.append("key", `${uploadObj.dir}/${uuid}${file.name}`); //文件名字，可设置路径
                    request.append("success_action_status", '200'); // 让服务端返回200,不然，默认会返回204
                    request.append('file', file); //需要上传的文件 file
                    $.ajax({
                        url: uploadObj.host, //上传阿里地址
                        data: request,
                        processData: false, //默认true，设置为 false，不需要进行序列化处理
                        cache: false, //设置为false将不会从浏览器缓存中加载请求信息
                        async: false, //发送同步请求
                        contentType: false, //避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
                        dataType: 'json', //不涉及跨域  写json即可
                        type: 'post',
                    });
                    var params = {
                        'header': header
                    }
                    // 修改用户头像信息
                    $.ajax({
                        url: "http://member.drygoods.top/member/member/update",
                        data: JSON.stringify(params),
                        processData: false, //默认true，设置为 false，不需要进行序列化处理
                        cache: false, //设置为false将不会从浏览器缓存中加载请求信息
                        async: false, //发送同步请求
                        contentType: 'application/json', //避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
                        dataType: 'json', //不涉及跨域  写json即可
                        type: 'post',
                    });
                    console.log(header);
                    location.replace(location.href);
                } else {
                    // alert(`${response && response.header.msg[0]}`);
                }
            },
            error: function (error) {
                console.log(error);
            },
        });
        // console.log(`上传的文件oss地址${verifyImg}`);
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        if (!file) {
            return;
        }
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function (e) {
            //图片路径设置为读取的图片
            // img.src = e.target.result;
            document.getElementsByClassName('file-box')[i].style.background = "url(" + e.target.result + ")no-repeat"; //回显图片
            document.getElementsByClassName('file-box')[i].style.backgroundSize = '';
        };
        reader.readAsDataURL(file);
    }

    //获取UUID
    function getUUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
</script>
</html>
